<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>一个重要的内置关系</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    1.一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
    2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
-->

<div id="root">
  <school></school>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  Vue.prototype.msg='你好'
  const school = Vue.extend({
    template: `
      <div>
      <h2>学校名称：{{ schoolName }}</h2>
      <h2>学校地址：{{ address }}</h2>
      <button @click="showMsg">点我输出msg</button>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京',
      }
    },
    methods:{
      showMsg(){
        console.log(this.msg)
      }
    }
  })

  new Vue({
    el:'#root',
    data:{
    },
    components:{
      school
    }
  })
  console.log(school.prototype.__proto__===Vue.prototype)


 /* function Demo() {
    this.a = 1
    this.b = 2
  }

  //   创建一个Demo的实例对象
  const d = new Demo()
  console.log(Demo.prototype)//显示原型属性
  console.log(d.__proto__)//隐式原型属性
  // 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
  Demo.prototype.x=99

  console.log(d.__proto__.x)
  console.log(d)*/
</script>
</html>